
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>添加开班计划</title>
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/font-awesome/css/font-awesome.min.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/css/bootstrap.min.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/list.css')}}">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/st.css')}}">
	<script src="{{URL::asset('js/jquery.min.js')}}"></script>
	<script src="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/js/bootstrap.min.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
	<style media="screen">
		.el-button--text {
			padding: 0 5px;
		}
		.el-input__inner {
			max-width: 260px;
		}
		#main .sex_rate .el-input{
			width: 80px;
		}
		#main .lvl_rate .el-input{
			width: 80px;
		}
		::-webkit-inner-spin-button {
		     -webkit-appearance: none;
		}
	</style>
</head>
<body style="padding:30px 50px;background-color:#F3F3F4;">
<div id="main">
	<el-row>
		<el-col :md="12">
			<el-card>
				<el-form :model="form" label-width="120px" :rules="rules" ref="form">
					<el-form-item label="开班年度" prop="year">
						<el-date-picker style="width:171px;"
							v-model="form.year" align="right" type="year"
							placeholder="开班年度" :clearable="false" value-format="yyyy">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="开班季度" prop="season">
						<el-radio v-model="form.season" label="1">春季</el-radio>
						<el-radio v-model="form.season" label="2">秋季</el-radio>
					</el-form-item>
					<el-form-item label="批次" prop="batch">
						<el-date-picker style="width:171px;"
							v-model="form.batch" align="right" type="month"
							placeholder="批次" :clearable="false" value-format="yyyy-MM">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="校区" prop="campus">
						<el-select filterable v-model="form.campus" placeholder="请选择">
							<el-option v-for="opt in initData.campuses"
								:label="opt.name" :key="opt.id" :value="opt.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="班型" prop="type">
						<el-select filterable v-model="form.type" placeholder="请选择">
							<el-option v-for="opt in initData.class_type"
								:label="opt.name" :key="opt.id" :value="opt.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="班段" prop="stage">
						<el-select filterable v-model="form.stage"
						  placeholder="请选择">
							<el-option v-for="(opt,key) in initData.class_stage" :label="opt.name" :key="key" :value="opt.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="分组" prop="group">
						<el-select filterable v-model="form.group">
							<el-option v-for="opt in initData.class_group"
								:label="opt.name" :key="opt.id" :value="opt.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="班号" prop="no">
						<el-input-number v-model="form.no" controls-position="right" :min="1"></el-input-number>
					</el-form-item>
					<el-form-item label="班主任" prop="tutor">
						<el-select filterable v-model="form.tutor">
							<el-option v-for="opt in initData.tutor"
								:label="opt.username" :key="opt.id" :value="opt.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="班级人数" prop="total">
						<el-input-number v-model="form.total" controls-position="right" :min="1"></el-input-number>
					</el-form-item>
					<div class="sex_rate">
						<el-form-item label="男女比例" prop="sex_rate">
							<el-input v-model="form.male" type="number" :min="0">
								<span slot="prefix">男</span>
							</el-input>
							<el-input v-model="form.female" type="number" :min="0">
								<span slot="prefix">女</span>
							</el-input>
						</el-form-item>
					</div>
					<div class="lvl_rate">
						<el-form-item label="等级比例" prop="lvl_rate">
							<el-input v-model="form.lvl_a"><span slot="prefix">A</span></el-input>
							<el-input v-model="form.lvl_b"><span slot="prefix">B</span></el-input>
							<el-input v-model="form.lvl_c"><span slot="prefix">C</span></el-input>
							<el-input v-model="form.lvl_d"><span slot="prefix">D</span></el-input>
						</el-form-item>
					</div>
					<el-form-item label=" ">
						<el-button plain type="info" @click="goBack">返回</el-button>
						<el-button plain type="primary" @click="doSubmit">提交</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</el-col>
	</el-row>
</div>
</body>
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data(){
		let checkRate = (rule, value, callback) => {
			var sum = 0;
			if(rule.field == "sex_rate"){
				sum = Number(this.form.male) + Number(this.form.female);
			}else{
				sum = Number(this.form.lvl_a) + Number(this.form.lvl_b) + Number(this.form.lvl_c) + Number(this.form.lvl_d);
			}
			if(this.form.total != sum){
				return callback(new Error('比例人数总和 不等于 班级总人数'));
			}else{
				callback();
			}
		};
		return {
			initData:{
				campuses:[],
				class_stage:[],
				class_type:[],
				class_group:[],
				tutor:[]
			},
			form:{
				_token:"{{csrf_token()}}",
				id:"{{$Info['id']}}",
				year:"{{$Info['year']}}",season:"{{$Info['season']}}",batch:"{{$Info['batch']}}",
				campus:{{$Info['campus']}},
				type:{{$Info['type']}},
				stage:{{$Info['section']}},
				group:{{$Info['group']}},
				no:"{{$Info['no']}}",
				tutor:{{$Info['tutor_id']}},
				total:{{$Info['total']}},
				male:{{$Info['male']}},
				female:{{$Info['female']}},
				lvl_a:{{$Info['lvl_a']}},
				lvl_b:{{$Info['lvl_b']}},
				lvl_c:{{$Info['lvl_c']}},
				lvl_d:{{$Info['lvl_d']}}
			},
			rules:{
				year:[{required:true,message:'不能为空',trigger:['blur','change']}],
				batch:[{required:true,message:'不能为空',trigger:['blur','change']}],
				campus:[{required:true,message:'不能为空',trigger:['blur','change']}],
				type:[{required:true,message:'不能为空',trigger:['blur','change']}],
				stage:[{required:true,message:'不能为空',trigger:['blur','change']}],
				group:[{required:true,message:'不能为空',trigger:['blur','change']}],
				no:[{required:true,message:'不能为空',trigger:['blur','change']}],
				tutor:[{required:true,message:'不能为空',trigger:['blur','change']}],
				total:[{validator:checkRate,trigger:['blur','change']}],
				sex_rate:[{validator:checkRate,trigger:['blur','change']}],
				lvl_rate:[{validator:checkRate,trigger:['blur','change']}]
			}
		}
	},
	mounted:function() {
		this.getInitData();
	},
	methods:{
		getInitData() {
			let url = "{{URL::asset('admin/consultation/newclass/get_seaform_opt')}}";
			$.get(url,function(res) {
				main.initData =	res.data;
			});
		},
		goBack() {
			window.location.href = "{{URL::asset('admin/consultation/newclass')}}";
		},
		doSubmit(){
			this.$refs["form"].validate((valid) => {
				if (valid) {
					let url = "{{URL::asset('admin/consultation/newclass/update')}}";
					let param = this.form;
					$.post(url,param,function(res) {
						if(res.code == 1) {
							main.goBack();
						}else{
							main.$notify.error({title:"Error",message:res.msg});
						}
					});
				}else{
					this.$notify.info({title:"Notice",message:'填写不符合要求，请修改后再提交'});
				}
        	});
		},
	}
})
</script>
</html>
